<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
        <link rel="stylesheet" href="css/jquery.mobile-1.2.0.min.css" />
		<script src="js/jquery-1.8.2.js"></script>
		<script src="js/jquery.mobile-1.2.0.min.js"></script>
        <title>Hello World</title>
    </head>
    <body>
    
    <div data-role="page" id="one">

	<div data-role="header">
		<h1>AoC United ChatBox</h1>
	</div><!-- /header -->

	<div data-role="content">	
		<p><img src="" width="100" id="gambarku" /></p>
		<div id="namasaya">Guest</div>
		<p style="height:300px; border:1px solid #FFF; background-color:#CCC; overflow:scroll;" id="listchat"></p>
		<p><input type="text" id="pesen" /></p>
		<p><a href="#" data-role="button" id="kirimpesen">Kirim</a></p>	
	</div><!-- /content -->
	
	<div data-role="footer" data-theme="d">
		<h4>Copyright AoC United 2012</h4>
	</div><!-- /footer -->
</div><!-- /page one -->


        <script type="text/javascript" src="cordova-2.2.0.js"></script>
    <script>
    	var namaku = window.Helper.getusername();
    	var gambargw = window.Helper.getprofpic();
    	$("#namasaya").html(namaku);
    	$("#gambarku").attr("src", "http://www.aocunited.com/images/avatar/"+gambargw);
    	
    	$(document).ready(function() {
    	
    	setInterval(function() {
		    $.ajax({
			  url: 'http://aocunited.com/Chat/GetChat',
			  success: function(data) {
			  var hasil = data.split("$$%%");
			  var perrow;
			  var outputgan="";
			  for(var a=0;a<hasil.length-1;a++)
			  {
			  perrow = hasil[a].split("|");
			  outputgan+="<div style=\"background-color:#FFF; padding:10px; margin-top:5px; margin-bottom:5px;\"><table border=\"0\" width=\"100%\"><tr><td rowspan=\"2\" width=\"60\"><img src=\"http://www.aocunited.com/images/avatar/"+perrow[3]+"\" width=\"50\" height=\"50\"/></td><td><strong>"+perrow[0]+"</strong></td></tr><tr><td>"+perrow[1]+"</td></tr></table></div>";
			  }
			  $("#listchat").html(outputgan);
			  }
			});
		 }, 5000);
			
			
			$("#kirimpesen").click(function() {
    	if($("#pesen").val() != "" && $("#pesen").val() != " " && $("#pesen").val() != "  ")
    	{
    		var today = new Date();
			var dd = today.getDate();
			var mm = today.getMonth()+1; //January is 0!
			var jam = today.getHours(); 
			var menit = today.getMinutes(); 
			var detik = today.getSeconds(); 
			var yyyy = today.getFullYear();
			if(dd<10){dd='0'+dd} if(mm<10){mm='0'+mm} today = yyyy +'-'+ mm+'-'+dd+' '+jam+':'+menit+':'+detik;
			
	    	$.post("http://www.aocunited.com/Chat/SendMessage", { pesen : $("#pesen").val(), namapengirim : namaku, namapenerima : "public", chattime : today },
		      function( data ) {
		          $("#pesen").val("");
		          $.ajax({
				  url: 'http://aocunited.com/Chat/GetChat',
				  success: function(data) {
				  var hasil = data.split("$$%%");
				  var perrow;
				  var outputgan="";
				  for(var a=0;a<hasil.length-1;a++)
				  {
				  perrow = hasil[a].split("|");
				  outputgan+="<div style=\"background-color:#FFF; padding:10px; margin-top:5px; margin-bottom:5px;\"><table border=\"0\" width=\"100%\"><tr><td rowspan=\"2\" width=\"60\"><img src=\"http://www.aocunited.com/images/avatar/"+perrow[3]+"\" width=\"50\" height=\"50\"/></td><td><strong>"+perrow[0]+"</strong></td></tr><tr><td>"+perrow[1]+"</td></tr></table></div>";
				  }
				  $("#listchat").html(outputgan);
				  var objDiv = document.getElementById("listchat");
				  objDiv.scrollTop = objDiv.scrollHeight;
				  }
				});
		      }
		    );}
	    }
	);
	
	//keypress event
	$("#pesen").keypress(function(event) {
  if ( event.which == 13 ) {
    	if($("#pesen").val() != "" && $("#pesen").val() != " " && $("#pesen").val() != "  ")
    	{
    		var today = new Date();
			var dd = today.getDate();
			var mm = today.getMonth()+1; //January is 0!
			var jam = today.getHours(); 
			var menit = today.getMinutes(); 
			var detik = today.getSeconds(); 
			var yyyy = today.getFullYear();
			if(dd<10){dd='0'+dd} if(mm<10){mm='0'+mm} today = yyyy +'-'+ mm+'-'+dd+' '+jam+':'+menit+':'+detik;
			
	    	$.post("http://www.aocunited.com/Chat/SendMessage", { pesen : $("#pesen").val(), namapengirim : namaku, namapenerima : "public", chattime : today },
		      function( data ) {
		          $("#pesen").val("");
		          $.ajax({
				  url: 'http://aocunited.com/Chat/GetChat',
				  success: function(data) {
				  var hasil = data.split("$$%%");
				  var perrow;
				  var outputgan="";
				  for(var a=0;a<hasil.length-1;a++)
				  {
				  perrow = hasil[a].split("|");
				  outputgan+="<div style=\"background-color:#FFF; padding:10px; margin-top:5px; margin-bottom:5px;\"><table border=\"0\" width=\"100%\"><tr><td rowspan=\"2\" width=\"60\"><img src=\"http://www.aocunited.com/images/avatar/"+perrow[3]+"\" width=\"50\" height=\"50\"/></td><td><strong>"+perrow[0]+"</strong></td></tr><tr><td>"+perrow[1]+"</td></tr></table></div>";
				  }
				  $("#listchat").html(outputgan);
				  var objDiv = document.getElementById("listchat");
				  objDiv.scrollTop = objDiv.scrollHeight;
				  }
				});
		      }
		    );}
	    }
}
	);
	
		});
    </script>
    </body>
</html>
